<template>
  <div v-loading="tableLoading">
    <!-- 筛选项 -->
    <el-row :gutter="20" class="gl_searchBox">
      <el-col :span="6" :lg="4">
        <p>审核状态</p>
        <el-select v-model="api_GET_CompetitionQO.ApproveStatusCode" size="mini" placeholder="请选择赛事状态" filterable @change="getPageList()">
          <el-option v-for="item in dictAll.competitionApproveStatus" :key="item.code" :value="item.code" :label="item.value" />
        </el-select>
      </el-col>
      <el-col :span="6" :lg="4">
        <p>发布状态</p>
        <el-select v-model="api_GET_CompetitionQO.IsPublished" size="mini" placeholder="请选择赛事状态" filterable @change="getPageList()">
          <el-option :value="null" label="全部" />
          <el-option :value="true" label="已发布" />
          <el-option :value="false" label="未发布" />
        </el-select>
      </el-col>
      <el-col :span="12" :lg="8">
        <p>赛事时间</p>
        <el-date-picker
          v-model="filterGameDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%;"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          size="mini"
          @change="handleGameTimeChange"
        />
      </el-col>
      <el-col :span="6" :lg="4">
        <p>赛事名称</p>
        <el-input v-model="api_GET_CompetitionQO.Filter" placeholder="请输入名称" size="mini" clearable @change="getPageList()" />
      </el-col>
      <el-col :span="6" :lg="4" align="right" class="search_btn">
        <!-- 查询按钮 -->
        <el-button type="primary" size="mini" @click="getPageList()">{{ $t('button.query') }}</el-button>
        <!-- 重置按钮 -->
        <el-button type="warning" size="mini" @click="initForm()">{{ $t('button.Reset') }}</el-button>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <el-row :gutter="20" class="gl_my_15">
      <el-col :span="12">
        <el-button type="primary" size="mini" @click="openAddGame()">创建联赛</el-button>
      </el-col>
      <el-col :span="12" class="change_game_icon" align="right">
        <template v-if="showGameType === 'list'">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">平铺</div>
            <i class="el-icon-menu icon_change" @click="changeGameView('view')" />
          </el-tooltip>
        </template>
        <template v-if="showGameType === 'view'">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">列表</div>
            <i class="el-icon-s-operation icon_change" @click="changeGameView('list')" />
          </el-tooltip>
        </template>
      </el-col>
    </el-row>

    <!-- 赛事列表 -->
    <template v-if="showGameType === 'list'">
      <el-table class="gl_mb_15 game_table_list" :data="tableData" stripe size="mini" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="赛事logo" align="center" :width="95">
          <template slot-scope="{ row }">
            <img class="game_coverimg" :src="getStaticPhotoUrl(row.logoImage)" alt="" @error="errorPhoto">
          </template>
        </el-table-column>
        <el-table-column label="赛事名称" :min-width="220">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span> <i v-if="row.isDisabled" type="text" class="el-icon-remove" />
          </template>
        </el-table-column>
        <!-- <el-table-column prop="type.name" align="center" label="比赛类型" :width="100" /> -->
        <el-table-column label="赛事时间" align="center" :width="180">
          <template slot-scope="{ row }">
            {{ row.startTime && row.startTime.substring(0, 10) }} 到 {{ row.endTime && row.endTime.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="赛事状态" align="left" :width="110">
          <template slot-scope="{ row }">
            <span v-if="row.statusCode === 'Entry'" class="gl_color_success">
              <i class="el-icon-success" />
              <span class="gl_pl_5">{{ row.status && row.status.name }}</span>
            </span>
            <span v-else-if="row.statusCode === 'Running'" class="gl_color_info">
              <i class="el-icon-success" />
              <span class="gl_pl_5">{{ row.status && row.status.name }}</span>
            </span>
            <span v-else class="gl_color_grey">
              <i class="el-icon-success" />
              <span class="gl_pl_5">{{ row.status && row.status.name }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="审核状态" :width="180">
          <template slot-scope="{ row }">
            <span v-if="row.approveStatusCode === 'NotApproved'" class="gl_color_success">
              <i class="el-icon-success" />
              <span class="gl_pl_5">{{ row.approveStatus && row.approveStatus.name }}</span>
            </span>
            <span v-else-if="row.approveStatusCode === 'ApproveSuccess'" class="gl_color_info">
              <i class="el-icon-success" />
              <span class="gl_pl_5">{{ row.approveStatus && row.approveStatus.name }}</span>
            </span>
            <span v-else class="gl_color_grey">
              <i class="el-icon-error" />
              <span class="gl_pl_5">{{ row.approveStatus && row.approveStatus.name }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="审核进度" :width="80" align="center">
          <template slot-scope="{ row }">
            <el-button size="mini" type="text" @click="openApproveProgress(row)">
              <span class="gl_color_primary">查看</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="发布收费" :width="110">
          <template v-if="row.setting!==null" slot-scope="{ row }">
            <span v-if="row.setting.publishingIsFree" class="gl_color_success">
              <i class="el-icon-success" />
              <span class="gl_pl_5">{{ '免费' }}</span>
            </span>
            <span v-else class="gl_color_info">
              <i class="el-icon-success" />
              <span class="gl_pl_5">{{ '收费' }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="发布状态" :width="110">
          <template slot-scope="{ row }">
            <span :class="row.isPublished ? 'gl_color_info' : 'gl_color_grey'">
              <i :class="row.isPublished ? 'el-icon-success' : 'el-icon-error'" />
              <span class="gl_pl_5">{{ row.isPublished && '已发布' || '未发布' }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('table.actions')" align="left" :width="rightwidth">
          <template slot-scope="{ row }">
            <el-button v-if="!row.isTop" size="mini" type="text" @click="setGameTop(row)">
              <span class="gl_color_primary">赛事置顶</span>
            </el-button>
            <el-button v-else size="mini" type="text" @click="deleteGameTop(row)">
              <span class="gl_color_warning">取消置顶</span>
            </el-button>
            <!-- 发布 -->
            <el-button size="mini" type="text" @click="publishGame(row)">
              <span class="gl_color_warning">发布</span>
            </el-button>
            <!-- 删除 -->
            <el-button size="mini" type="text" @click="deleteGame(row)">
              <!-- TODO 删除按钮，删除当前联赛，联赛发布，已有分站赛后无法删除 -->
              <span class="gl_color_error">删除</span>
            </el-button>
            <!-- 禁用 -->
            <span v-if="user === 'WXCenter'" class="gl_color_error" style="margin-left:10px;margin-right:10px">
              <el-button v-if="row.isDisabled" size="mini" type="text" @click="enable(row)">
                <span>解除禁用</span>
              </el-button>
              <el-button v-else size="mini" type="text" @click="ban(row)">
                <span class="gl_color_error">禁用</span>
              </el-button>
            </span>
            <!-- 更多 -->
            <el-button size="mini" type="text">
              <el-dropdown trigger="click">
                <span class="gl_color_primary" style="font-size: 12px;">
                  更多<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in gameBtnList" :key="item.code">
                    <div class="dropdown_item" @click="handleCommand(item.code, row)">{{ item.name }}</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 赛事视图 -->
    <template v-if="showGameType === 'view'">
      <el-row v-if="tableData.length" :gutter="15" class="game_view_list">
        <el-col v-for="(item, index) in tableData" :key="index" :span="8" :lg="6" style="min-width: 335px;" class="gl_mb_15">
          <div class="game_view_item">
            <div v-if="item.isTop" class="game_top gl_color_primary">
              <i class="el-icon-upload2" />
              已置顶
            </div>
            <div class="game_title">
              <img class="game_coverimg" :src="getStaticPhotoUrl(item.logoImage)" alt="" @error="errorPhoto">
              <div class="game_status">
                <!-- 赛事状态 -->
                <span v-if="item.statusCode === 'Entry'" class="game_status_item gl_bg_success gl_mr_5">
                  <i class="el-icon-success" />
                  <span class="gl_pl_5">{{ item.status && item.status.name }}</span>
                </span>
                <span v-else-if="item.statusCode === 'Running'" class="game_status_item gl_bg_info gl_mr_5">
                  <i class="el-icon-success" />
                  <span class="gl_pl_5">{{ item.status && item.status.name }}</span>
                </span>
                <span v-else class="game_status_item gl_bg_grey gl_mr_5">
                  <i class="el-icon-success" />
                  <span class="gl_pl_5">{{ item.status && item.status.name }}</span>
                </span>

                <!-- 审核状态 -->
                <span v-if="item.approveStatusCode === 'NotApproved'" class="game_status_item gl_bg_success gl_mr_5">
                  <i class="el-icon-success" />
                  <span class="gl_pl_5">{{ item.approveStatus && item.approveStatus.name }}</span>
                </span>
                <span v-else-if="item.approveStatusCode === 'ApproveSuccess'" class="game_status_item gl_bg_info gl_mr_5">
                  <i class="el-icon-success" />
                  <span class="gl_pl_5">{{ item.approveStatus && item.approveStatus.name }}</span>
                </span>
                <span v-else class="game_status_item gl_bg_grey gl_mr_5">
                  <i class="el-icon-error" />
                  <span class="gl_pl_5">{{ item.approveStatus && item.approveStatus.name }}</span>
                </span>

                <!-- 发布状态 -->
                <span :class="item.isPublished ? 'gl_bg_info' : 'gl_bg_grey'" class="game_status_item gl_mr_5">
                  <i :class="item.isPublished ? 'el-icon-success' : 'el-icon-error'" />
                  <span class="gl_pl_5">{{ item.isPublished && '已发布' || '未发布' }}</span>
                </span>
                <span v-if="item.setting!==null">
                  <span v-if="item.setting.publishingIsFree" class="game_status_item gl_bg_success gl_mr_5">
                    <i class="el-icon-success" />
                    <span class="gl_pl_5">{{ '免费' }}</span>
                  </span>
                  <span v-else class="game_status_item gl_bg_info gl_mr_5">
                    <i class="el-icon-success" />
                    <span class="gl_pl_5">{{ '收费' }}</span>
                  </span>
                </span>

              </div>
            </div>
            <div class="game_content">
              <div class="game_view_name gl_ellipsis"><span>{{ item.name }}</span> <i v-if="item.isDisabled" type="text" class="el-icon-remove" /></div>
              <div class="game_view_type gl_mt_10">
                比赛类型：{{ item.type && item.type.name }}
              </div>
              <div class="game_view_play gl_mt_10">
                比赛时间：{{ item.startTime && item.startTime.substring(0, 10) }} 到 {{ item.endTime && item.endTime.substring(0, 10) }}
              </div>
            </div>
            <div class="hover_show_message">
              <div class="game_title">
                <div class="game_view_name gl_ellipsis gl_mt_30"><span>{{ item.name }}</span> <i v-if="item.isDisabled" type="text" class="el-icon-remove" /></div>
                <div class="game_view_type gl_mt_10">
                  比赛类型：{{ item.type && item.type.name }}
                </div>
                <div class="game_view_play gl_mt_10">
                  比赛时间：{{ item.startTime && item.startTime.substring(0, 10) }} 到 {{ item.endTime && item.endTime.substring(0, 10) }}
                </div>
                <div class="game_status gl_mt_20">
                  <!-- 赛事状态 -->
                  <span v-if="item.statusCode === 'Entry'" class="game_status_item gl_bg_success gl_mr_20">
                    <i class="el-icon-success" />
                    <span class="gl_pl_5">{{ item.status && item.status.name }}</span>
                  </span>
                  <span v-else-if="item.statusCode === 'Running'" class="game_status_item gl_bg_info gl_mr_20">
                    <i class="el-icon-success" />
                    <span class="gl_pl_5">{{ item.status && item.status.name }}</span>
                  </span>
                  <span v-else class="game_status_item gl_bg_grey gl_mr_20">
                    <i class="el-icon-success" />
                    <span class="gl_pl_5">{{ item.status && item.status.name }}</span>
                  </span>

                  <!-- 审核状态 -->
                  <span v-if="item.approveStatusCode === 'NotApproved'" class="game_status_item gl_bg_success gl_mr_20">
                    <i class="el-icon-success" />
                    <span class="gl_pl_5">{{ item.approveStatus && item.approveStatus.name }}</span>
                  </span>
                  <span v-else-if="item.approveStatusCode === 'ApproveSuccess'" class="game_status_item gl_bg_info gl_mr_20">
                    <i class="el-icon-success" />
                    <span class="gl_pl_5">{{ item.approveStatus && item.approveStatus.name }}</span>
                  </span>
                  <span v-else class="game_status_item gl_bg_grey gl_mr_20">
                    <i class="el-icon-error" />
                    <span class="gl_pl_5">{{ item.approveStatus && item.approveStatus.name }}</span>
                  </span>

                  <!-- 发布状态 -->
                  <span :class="item.isPublished ? 'gl_bg_info' : 'gl_bg_grey'" class="game_status_item">
                    <i :class="item.isPublished ? 'el-icon-success' : 'el-icon-error'" />
                    <span class="gl_pl_5">{{ item.isPublished && '已发布' || '未发布' }}</span>
                  </span>
                </div>
              </div>
              <div class="game_content">
                <el-row :gutter="20">
                  <el-col v-for="jtem in gameBtnList" :key="jtem.code" :span="8" class="gl_my_5">
                    <el-button type="primary" size="small" @click="handleCommand(jtem.code, item)">{{ jtem.name }}</el-button>
                  </el-col>
                </el-row>
              </div>
              <div v-if="!item.isTop" class="game_top gl_color_primary" @click="setGameTop(item)">
                <i class="el-icon-upload2" />
                置顶
              </div>
              <div v-else class="game_top gl_color_warning" @click="deleteGameTop(item)">
                <i class="el-icon-close" />
                取消置顶
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="24" class="gl_noData_mockTable" />
      </el-row>
    </template>
    <el-row style="text-align: center;" class="gl_pb_15">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="api_GET_CompetitionQO.MaxResultCount"
        :current-page="api_GET_CompetitionQO.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
    <approve-progress ref="approveProgress" />
    <ban ref="ban" />
    <h5codescanning ref="h5codescanning" game-type="league" :game-info="currentGame" />
    <form id="form" ref="form" action="https://unipay.ydfuture.com/api/v1/trade/cashDesk" method="post" style="display:none">
      <input ref="pay_params" type="text" name="pay_params" value="">
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
import { api_PUT_ClubTAManagementDisableCompetition } from '@/extend/api/hallswaggerApi/app.js';
import { DisableCompetitionInput } from '@/lib/form/hall/swaggerForm';
import ban from '../../ban/index';
import { mapState, mapActions } from 'vuex';
import defaultGameLogo from '@/assets/images/game/game_logoDefaultPhoto.png';
import { Api_GET_CompetitionQO } from '@/lib/form/events';
import {
  api_GET_EventsManagementCompetitionEditableList,
  api_DELETE_EventsManagementCompetitionId,
  api_POST_EventsManagementCompetitionTop,
  api_DELETE_EventsManagementCompetitionTop,
  api_POST_EventsManagementCompetitionIdPublished
} from '@/extend/api/gameswaggerApi/app';
import approveProgress from './approveProgress';
import h5codescanning from '@/components/H5GameQRCode/index';
import {
  api_GET_TradePayOrderParameter // 获取支付订单的参数
} from '@/extend/api/swaggerApi/app';
import {
  Api_GET_TradePayOrderParameterQO
} from '@/lib/form/swaggerForm';
export default {
  components: {
    approveProgress,
    ban,
    h5codescanning
  },
  data() {
    return {
      orderParameterQO: new Api_GET_TradePayOrderParameterQO(),
      DisableCompetitionInput: new DisableCompetitionInput(), // 启用赛事
      rightwidth: 200,
      defaultGameLogo: defaultGameLogo,
      filterGameDate: [],
      api_GET_CompetitionQO: new Api_GET_CompetitionQO(),
      showGameType: 'list',
      tableData: [],
      total: 0,
      tableLoading: false,
      gameBtnList: [
        {
          code: 'edit',
          name: '赛事编辑',
          isShow: true
        },
        {
          code: 'integralSetting',
          name: '积分设置',
          isShow: true
        },
        // {
        //   code: 'leagueExpenses',
        //   name: '费用设置',
        //   isShow: true
        // },
        {
          code: 'data',
          name: '数据管理',
          isShow: true
        },
        {
          code: 'official',
          name: '赛事官网',
          isShow: true
        },
        {
          code: 'substation',
          name: '分站管理',
          isShow: true
        },
        // {
        //   code: 'H5Code',
        //   name: 'H5扫码',
        //   isShow: true
        // }
      ],
      // 勾选项
      selectionList: [],
      currentGame: { tenantId: '', route: '' }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      dictAll: state => state.dict.dictAll,
      user: state => state.user.info.currentOrganizationUnit.typeCode,
      tenantId: state => state.user.tenantId
    })
  },
  created() {
    this.getDict();
    this.initForm();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 初始化
    initForm() {
      // 添加禁用
      if (this.user === 'WXCenter') {
        this.rightwidth = 260;
      }
      this.api_GET_CompetitionQO = new Api_GET_CompetitionQO();
      this.api_GET_CompetitionQO.ApproveStatusCode = '';
      this.filterGameDate = [];
      this.getPageList();
    },
    // 获取赛事列表
    getPageList(page) {
      // 独立赛
      // this.api_GET_CompetitionQO.TypeCode = 'Independent';
      // 默认联赛
      this.api_GET_CompetitionQO.TypeCode = 'League';
      this.api_GET_CompetitionQO.Page = page || 1;
      this.api_GET_CompetitionQO.SkipCount = (this.api_GET_CompetitionQO.Page - 1) * this.api_GET_CompetitionQO.MaxResultCount;
      this.tableLoading = true;
      this.api_GET_CompetitionQO.IncludeSetting = true;
      api_GET_EventsManagementCompetitionEditableList(this.api_GET_CompetitionQO).then(res => {
        this.tableLoading = false;
        this.tableData = res.items || [];
        this.total = res.totalCount;
      }, () => {
        this.tableLoading = false;
        this.$message({ type: 'error', message: '获取赛事列表失败！' });
      });
    },
    // 处理时间筛选项
    handleGameTimeChange(time) {
      this.api_GET_CompetitionQO.StartTime = time && time[0];
      this.api_GET_CompetitionQO.EndTime = time && time[1];
      this.getPageList();
    },
    // 表格选中
    handleSelectionChange(selection) {
      this.selectionList = [];
    },
    // 切换赛事展示的形式 list / view
    changeGameView(type) {
      this.showGameType = type;
    },
    // 点击更多
    handleCommand(code, gameInfo) {
      let name = '';
      switch (code) {
        // 赛事编辑
        case 'edit':
          name = 'LeagueGameEdit';
          break;
        // 数据管理
        case 'data':
          name = 'LeagueGameData';
          break;
        // 积分设置
        case 'integralSetting':
          name = 'LeagueIntegralSetting';
          break;
        // 费用设置
        // case 'leagueExpenses':
        //   name = 'LeagueGameExpenses';
        //   break;
        // 赛事官网
        case 'official':
          if (gameInfo.isDisabled) {
            this.$message({ type: 'warning', message: '当前赛事已被禁用，请联系平台管理员。' });
            return;
          }
          var a = document.createElement('a');
          var event = new MouseEvent('click');
          a.href = `${location.origin}/league.html#/home/${gameInfo.route}/info`;
          a.target = '_blank';
          a.dispatchEvent(event);
          break;
        // 分站管理
        case 'substation':
          name = 'SubstationGameManage';
          break;
        // H5扫码
        case 'H5Code':
          this.currentGame = { tenantId: gameInfo.tenantId, route: gameInfo.route };
          this.$refs.h5codescanning.H5DialogVisible = true;
          break;
        default:
          break;
      }
      if (!name) return;
      const { query } = this.$route;
      query.gameName = gameInfo.name || '';
      this.$router.push({
        name: name,
        params: { parentId: gameInfo.id, tenantId: 't__' + (gameInfo.tenantId || '') },
        query: query
      });
    },
    // 新增赛事
    openAddGame() {
      this.$router.push({
        name: 'LeagueGameAdd'
      });
    },
    // 删除赛事
    deleteGame(gameInfo) {
      this.$confirm(`您确定要删除该赛事吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_DELETE_EventsManagementCompetitionId(gameInfo.id).then(() => {
          this.getPageList();
          this.$message({ type: 'success', message: '删除成功！' });
        }, error => {
          this.tableLoading = false;
          this.$message({ type: 'error', message: '删除失败！' + (error.error && error.error.message || '') });
        });
      }).catch(() => {});
    },
    // 点击审核
    openApprove(row) {
      this.approveVO = new SiSTKWEventsManagementUpdateCompetitionApproveStatusInput();
      this.gameId = row.id;
      this.approveVO.approveStatusCode = row && row.approveStatusCode || 'ApproveSuccess';
      this.approveDialogVisible = true;
    },
    // 设置赛事置顶
    setGameTop(gameInfo) {
      this.$confirm(`您确定要置顶该赛事吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_POST_EventsManagementCompetitionTop({ competitionId: gameInfo.id }).then(() => {
          this.getPageList();
          this.$message({ type: 'success', message: '置顶成功！' });
        }, error => {
          this.tableLoading = false;
          this.$message({ type: 'error', message: '置顶失败！' + (error.error && error.error.message || '') });
        });
      }).catch(() => {});
    },
    // 取消赛事置顶
    deleteGameTop(gameInfo) {
      this.$confirm(`您确定要取消置顶该赛事吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_DELETE_EventsManagementCompetitionTop({ competitionId: gameInfo.id }).then(() => {
          this.getPageList();
          this.$message({ type: 'success', message: '取消置顶成功！' });
        }, error => {
          this.tableLoading = false;
          this.$message({ type: 'error', message: '取消置顶失败！' + (error.error && error.error.message || '') });
        });
      }).catch(() => {});
    },
    // 发布赛事
    publishGame(row) {
      this.$confirm(`您确定要发布该赛事吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api_POST_EventsManagementCompetitionIdPublished(row.id).then((res) => {
          if (res.isPublished) {
            this.getPageList();
            this.$message({ type: 'success', message: '操作成功！' });
          } else {
            this.payment(res.orderNo);
          }
        }, error => {
          this.$message({ type: 'error', message: error.error && error.error.code || '' });
        });
      }).catch(() => {});
    },
    // 去支付
    payment(orderNo) {
      if (orderNo) {
        const _origin = window.location.origin;
        const _pathname = window.location.pathname;
        const _orderUrl = `#/t__${this.tenantId || ''}/order/orderSearch`;
        const url = _origin + _pathname + _orderUrl;
        this.orderParameterQO.OrderNo = orderNo;
        this.orderParameterQO.ReturnUrl = url; // 支付成功后跳转的地址
        api_GET_TradePayOrderParameter(this.orderParameterQO)
          .then(res => {
            this.$refs.pay_params.value = res.parameter.replace(/\s*/g, '');
            this.$refs.form.submit();
          });
      }
    },
    // 查看审核进度
    openApproveProgress(row) {
      this.$refs.approveProgress.open(row);
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultGameLogo;
    },
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.api_GET_CompetitionQO.MaxResultCount = pagesize;
      this.getPageList();
    },
    // 启用
    enable(row) {
      this.tableLoading = true;
      this.DisableCompetitionInput.isDisabled = false;
      this.DisableCompetitionInput.competitionId = row.id;
      api_PUT_ClubTAManagementDisableCompetition(this.DisableCompetitionInput).then(res => {
        this.tableLoading = false;
        this.$message({
          type: 'success',
          message: '解禁成功'
        });
        this.getPageList();
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 禁用
    ban(row) {
      this.$refs.ban.DisableCompetitionInput.isDisabled = true;
      this.$refs.ban.DisableCompetitionInput.competitionId = row.id;
      this.$refs.ban.dialogVisible = true;
    }
  }
};
</script>
<style scoped>
.change_game_icon {
  height: 28px;
  line-height: 32px;
}
.change_game_icon .icon_change {
  font-size: 18px;
  width: 24px;
  height: 24px;
  visibility: visible;
  color: #696b6c;
  cursor: pointer;
}
.change_game_icon .icon_change:hover {
  color: #1890ff;
}
.game_table_list .game_coverimg {
  max-width: 74px;
  max-height: 74px;
  border-radius: 50%;
  vertical-align: middle;
}
.dropdown_item {
  margin: 0 -20px;
  padding: 0 20px;
}
.game_view_item {
  position: relative;
  background: #fff;
  border-radius: 4px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.098);
  overflow: hidden;
}
.game_view_item .game_top {
  position: absolute;
  width: 80px;
  height: 16px;
  top: 7px;
  right: 9px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.game_view_item .game_title {
  width: 100%;
  text-align: center;
  padding: 20px 0;
  height: 215px;
  box-sizing: border-box;
}
.game_view_item .game_status_item {
  padding: 3px 8px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.game_view_item .game_coverimg {
  max-width: 100px;
  max-height: 100px;
  border-radius: 50%;
  margin: 20px 0;
}
.game_view_item .game_content {
  width: 100%;
  height: 140px;
  padding: 5px 20px;
  font-size: 14px;
  color: #848484;
  background: rgba(244, 248, 255, 1);
}
.game_view_item .game_view_name {
  font-size: 16px;
  color: #333;
}
.game_view_item .hover_show_message {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.hover_show_message .game_top {
  position: absolute;
  width: 80px;
  height: 16px;
  top: 7px;
  right: 9px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.game_view_item:hover .hover_show_message {
  top: 0;
}
.hover_show_message .game_title {
  background: rgba(249, 249, 249, 1);
  opacity: 0.9;
  font-size: 14px;
}
.hover_show_message .game_content {
  background: #fff;
}
</style>
